<template>
	<view class="weather-card">
		<view class="weather-box">
			<view class="content">
				<view class="date">
					<view class="time">{{ weatherTime }}</view>
					<view class="week">星期{{ week }}</view>
					<view class="day">{{ $u.timeFormat(new Date().getTime(), 'yyyy/mm/dd') }}</view>
				</view>
				<view class="weather" v-if="nowWeather.text">
					<view class="temp">{{ nowWeather.temp || '--' }}℃</view>
					<view class="weath">{{ nowWeather.text }}</view>
					<view class="wind">{{ nowWeather.windDir }}{{ nowWeather.windScale }}级/湿度{{
						nowWeather.humidity }}%</view>
				</view>
				<view class="icon">
					<image src="/static/aidex/images/weather-icon.png" mode="scaleToFill">
					</image>
				</view>
			</view>
			<view v-if="vuex_user.nickName" class="user-name">你好! {{ vuex_user.nickName }}</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex"
export default {
	name: 'WeatherCard',
	data() {
		return {
			timer: null,
			weatherTime: null,
			nowWeather: {},
		}
	},
	computed: {
		...mapGetters(['isNetworkConnected']),
		week() {
			const weeks = ['日', '一', '二', '三', '四', '五', '六'];
			return weeks[new Date().getDay()];
		},
	},
	created() {
		this.weatherTime = this.$u.timeFormat(new Date().getTime(), 'hh:MM')
		if (this.isNetworkConnected) {
			this.timer = setInterval(() => {
				this.weatherTime = this.$u.timeFormat(new Date().getTime(), 'hh:MM')
				this.getLocation();
			}, 60000)
		}
	},
	methods: {
		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				timeout: 30,
				success: location => {
					let locationStr = location.longitude + ',' + location.latitude;
					this.$u.api.otherWeather(locationStr).then(res => {
						if (res.code == 200) {
							this.nowWeather = res.now;
						}
					});
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.weather-card {
	padding: 0 38rpx;
}

.weather-box {
	padding: 35upx 50upx 26upx 40upx;
	min-width: 589upx;
	height: 277upx;
	background: url(/static/aidex/images/weather-bg.png);
	background-size: cover;
	border-radius: 11upx;
	color: #ffffff;

	.content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 17upx;

		.date {
			width: 130upx;
			margin-right: 72upx;

			.time {
				margin-bottom: 15upx;
			}

			.week {
				margin-bottom: 8upx;
			}
		}

		.date,
		.weather {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 22upx;
		}

		.time,
		.temp {
			font-size: 50upx;
			font-weight: bold;
		}

		.icon {
			width: 101upx;
			height: 78upx;
		}
	}

	.user-name {
		font-size: 36upx;
	}
}
</style>